<template>
  <div>
    <div>
      <el-divider>{{ excelSheet.sheetName}} 表头 </el-divider>
    </div>
    <el-table ref="tableRef" v-loading="loading" :data="dataSource" border stripe :height="autoHeight" @row-click="handleRowClick" @select="selectSingle" @select-all="selectAll" @selection-change="selectAll" >
      <el-table-column label="工作页名称" prop="sheetName" align="center"></el-table-column>
      <el-table-column label="表头名称" prop="columnTitle" align="center"></el-table-column>
      <el-table-column label="表头属性" prop="columnProp" align="center"> </el-table-column>
    </el-table>

    <div class="lab-table-page">
      <div style="display: inline-flex">
        <el-pagination
            :disabled="loading"
            :current-page="pageInfo.page"
            :page-sizes="[5, 10, 15, 20, 30, 50, 100]"
            :page-size="pageInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageInfo.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
        <el-button-group style="padding: 2px 5px">
          <el-button icon="el-icon-refresh" title="刷新" :disabled="loading" @click="loadSource([])" />
        </el-button-group>
      </div>
    </div>
  </div>
</template>

<script>
import IdeaTable from "@/mixins/IdeaTable";
import CodeEditor from "@/components/codeEditor/CodeEditor";

export default {
  name: "ExcelColumnTable",
  components: {CodeEditor},
  mixins: [ IdeaTable],
  inject: {
    excelTemplate: {
      from: 'excelTemplate',
      default: function () {
        return { sheets: [], excelId: '0', excelOut: {} }
      }
    }
  },
  props: {
    excelSheet: {
      type: Object,
      default:function () {
        return { sheetId: '0'}
      }
    }
  },
  computed: {
    autoHeight(){
      return `calc(100vh - 367px)`
    }
  },
  created() {
    this.queryUrl = 'excelColumn/queryPage'
    this.saveUrl = 'excelColumn/save'
    this.removeUrl = 'excelColumn/delete/'
    this.rowKey = 'columnId'
    this.tableRef = 'tableRef'
    this.selectCount = 1
    this.pageInfo.pageSize = 30
    this.addFilter({ field: 'excelId',op: '=',value: this.excelTemplate.excelId})
    this.addFilter({ field: 'sheetId',op: '=',value: this.excelSheet.sheetId })
    this.loadSource()
  },
  methods: {
    addColumn() {
      const column = { excelId:  this.excelTemplate.excelId, sheetId: this.excelSheet.sheetId, sheetName: this.excelSheet.sheetName  }
      this.dataSource.splice(0,0, column)
    },
    saveColumn() {
      this.$post('excelColumn/saves', this.dataSource)
          .then(res => {
            this.$resultMsg(this, res)
            if (res.code === 200) {
              this.loadSource()
            }
          })
    }
  }
}
</script>

<style scoped>

</style>
